<template>
  <div id="charts-content" />
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import merge from 'lodash-es/merge'
import { onMounted, computed, watchEffect } from 'vue'

import { getColumnConfig } from '@/config/Column.config'
// 引入 lodash 中的 merge、深克隆

const props = withDefaults(
  defineProps<{
    optionsData: {
      series: {
        gridSize: number
        data: {
          name: string
          value: number
        }[]
      }[]
      [key: string]: any
    }
    optionsColors: string[]
    optionsLimit: number[]
  }>(),
  {},
)
let emit = defineEmits<(e: 'wordClickHandler', name: string) => void>()
let defaultSeries = []
let series = ref<any>([])
let mychart = null
// 如果失去响应式变化可以使用computed, 以及使用toRefs, 传入第二个参数,
// TODO, 使用toRefs实现响应式变化
let seriesData = computed(() => {
  return props.optionsData.series
})
// 创建echarts, 初始化内容
onMounted(() => {
  defaultSeries = getColumnConfig(props.optionsColors)
  watchEffect(() => {
    series.value = merge({}, defaultSeries[0], seriesData.value[0], { sizeRange: props.optionsLimit })
    DrawWordCloud()
  })
})
function DrawWordCloud() {
  if (mychart) {
    mychart.setOption({
      series: series.value,
    })
    mychart.resize()
    return
  }
  // 词云
  // eslint-disable-next-line import/namespace
  mychart = echarts.init(document.getElementById('charts-content')) // 可以设置主题色'dark'
  mychart.setOption({
    series: series.value,
  })
  mychart.on('click', (info) => {
    emit('wordClickHandler', info?.name)
  })
}
</script>
<style scoped lang="less">
#charts-content {
  height: 80vh;
}
</style>
